<!--
 * @Author: jingzi 1163478123@qq.com
 * @Date: 2025-05-07 20:43:15
 * @LastEditors: jingzi 1163478123@qq.com
 * @LastEditTime: 2025-09-23 11:12:13
 * @Description: gitlab操作
 * Copyright (c) 2025 by ${git_name}, All Rights Reserved.
-->
<template> 
    <div class="container">
        <h4 class="title">gitlab操作</h4>
        <div class="btn-group">
          <button class="btn" @click="getTagData">刷新</button>
          <button class="btn" @click="clearCache">删除缓存</button>
        </div>
        <div class="content">
          <h3>现有tag信息</h3>
          <!-- <div class="user-list">
            <span v-for="name in userNames" :class="['user-item', selectedUserName === name ? 'selected' : '']" @click="selectUser(name)" :key="name">
              {{ name }}
            </span>
          </div> -->
          <div v-for="item in tagData" :key="item.tag">
            <div class="tag-item" >
              <div>
                <input class="checkbox" type="checkbox" v-model="item.isSend">
                {{ item.projectName }}、{{ item.tag }}
              </div>
              <span class="delete-btn" @click="removeTag(item)">X</span>
            </div>
          </div>
          <!-- <button class="btn" @click="sendSuccessMsg">一键通知企业微信</button> -->
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import { gitlabToJenkins, USER_NAMES } from '../../config'
import { nativePost } from '../../utils/http'
import { Toast } from '../../utils/toast'
import { getStorageData, removeStorageData, setStorageData } from '../../utils/index'

import '../style.css'

const tagData = ref([])
const userNames = ref(Object.keys(USER_NAMES))
const selectedUserName = ref('')// 选择所有用户
onMounted(()=>{
  getTagData()
})
/**
 * @description: 获取缓存信息
 */
const getTagData = async () => {
  const selectedElements = await getStorageData('selectedElementData')
  tagData.value = selectedElements.map(item=>{
    return {
      ...item,
      isSend: true,
      jenkins: gitlabToJenkins[item.projectName] || ''
    }
  })
}
const removeTag = (item) => {
  const tagIndex = tagData.value.findIndex(_item=>_item.projectName === item.projectName && _item.tag === item.tag)
  tagData.value.splice(tagIndex, 1)
  if(tagData.value.length === 0) {
    clearCache()
  }else{
    setStorageData('selectedElementData', tagData.value)
  }
  Toast.success('删除成功')
}
/**
 * @description: 删除缓存
 */
const clearCache = () => {
  removeStorageData('selectedElementData')
  getTagData()
}
/**
 * @description: 选择用户,只能选择一个
 */
const selectUser = (name) => {
  selectedUserName.value = name
}
const sendSuccessMsg = async () => {
  const url = 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=e2a7c026-e6aa-4134-b4f8-ce84c70972b7'
  const mobile = USER_NAMES[selectedUserName.value]
  const tagList = tagData.value.filter(item=>item.isSend)
  const projectNames = tagList.map(item=>item.projectName).join('、')
  const msg = tagList.map(item=>`
  项目信息:<font color=\"comment\">${item.projectName}：${item.tag}</font>
  日志链接:[${item.jenkins}](${item.jenkins})
  `).join('\n')
    
  const params = {
    "msgtype": "markdown",
    "markdown": {
      "content": `当前发版项目可查看日志。\n> 
      ${msg}
      查看人:<@${selectedUserName.value}>`
    }
  }
  // 先发送发版信息
  const res = await nativePost(url, params)
  const param2 = {
    "msgtype": "text",
    "text": {
        "content": `上述项目${projectNames}发版中，注意查看日志`,
		    "mentioned_mobile_list":[mobile]
    }
  }
  // 再艾特对应用户，因为没有用户ID
  setTimeout(async ()=>{
    const res = await nativePost(url, param2)
    console.log(res)
    Toast.success('企业微信通知成功')
    clearCache()
  },1000)
}
</script>
<style scoped lang="less">
.container{
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.tag-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.btn-group{
  display: flex;
  align-items: center;
}
.checkbox {
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.btn + .btn {
  margin-left: 10px;
}
.delete-btn{
  padding: 3px 5px;
  font-size: 16px;
  cursor: pointer;
  color: #d20101;
  margin-left: 10px;
}
</style>